<template>
  <div class="recommended">
    <BannerImg/> 
    <RecomNav/>
    <!-- 新上好课 -->
  <RecomcourseList :title="this.$store.state.recomarr.demo1.title" :all="this.$store.state.recomarr.demo1.all" :listdata="this.$store.state.recomarr.demo1.arr" />
  <!-- 精品体系课 -->
  <JingPinList :title="this.$store.state.recomarr.demo2.title" :all="this.$store.state.recomarr.demo2.all" :listdata="this.$store.state.recomarr.demo2.arr"/>
  <!-- 进站必学 -->
   <RecomcourseList :title="this.$store.state.recomarr.demo3.title" :all="this.$store.state.recomarr.demo3.all" :listdata="this.$store.state.recomarr.demo3.arr" />
   <!-- 榜单 -->
   <BangDanList :title="this.$store.state.recomarr.demo4.title" :listdata="this.$store.state.recomarr.demo4.arr" />
   <!-- 学习路线 -->
   <XueXiLuXianList :title="this.$store.state.recomarr.demo5.title" :all="this.$store.state.recomarr.demo5.all" :listdata="this.$store.state.recomarr.demo5.arr" />
   <!-- 限时拼团 -->
   <RecomcourseList :title="this.$store.state.recomarr.demo6.title" :all="this.$store.state.recomarr.demo6.all" :listdata="this.$store.state.recomarr.demo6.arr" />
   <!-- 慕课专栏 -->
   <MuKeZhuanLanList :title="this.$store.state.recomarr.demo7.title" :all="this.$store.state.recomarr.demo7.all" :listdata="this.$store.state.recomarr.demo7.arr" />
   <!-- 慕课教程 -->
   <JiaoChengList :title="this.$store.state.recomarr.demo8.title" :all="this.$store.state.recomarr.demo8.all" :listdata="this.$store.state.recomarr.demo8.arr" />
<div class="recombottom">
<p> <span>个性推荐</span> <span>根据你的学习兴趣综合推荐</span></p>
<div>
  <p>还没有设置兴趣方向</p>
  <p>设置兴趣方向，让我更懂你</p>
  <button>去设置</button>
</div>
<div>
  <p>www.imooc.com</p>
<p>编程梦想 程就未来</p>
</div>

</div>

  </div>
  
</template>

<script>
import BannerImg from '@/components/homecomp/recommendedcomp/bannerimg.vue'
import RecomNav from '@/components/homecomp/recommendedcomp/recomnav.vue'
import RecomcourseList from '@/components/homecomp/recommendedcomp/recomcourselist.vue'
import JingPinList from '@/components/homecomp/recommendedcomp/jingpinlist.vue'
import BangDanList from '@/components/homecomp/recommendedcomp/bangdanlist.vue'
import XueXiLuXianList from '@/components/homecomp/recommendedcomp/xuexiluxianlist.vue'
import MuKeZhuanLanList from '@/components/homecomp/recommendedcomp/mukezhuanlanlist.vue'
import JiaoChengList from '@/components/homecomp/recommendedcomp/jiaochenglist.vue'
export default {
mounted(){
     this.$store.dispatch("rercomaxioslink",{url:"htttp://src/moke/data"});
},
components:{
  BannerImg,RecomNav,RecomcourseList,JingPinList,BangDanList,XueXiLuXianList,MuKeZhuanLanList,JiaoChengList
},
}
</script>

<style scoped>
.recombottom{
  width: 3.4rem;
  height: 2.4rem;
  margin: auto;
  position: relative;
}
.recombottom>p:nth-child(1)>span:nth-child(1){
font-weight: bold;
font-family: "微软雅黑";
/* background-color: #000; */
}
.recombottom>p:nth-child(1)>span:nth-child(2){

font-family: "微软雅黑";
color: #787f85;
font-size: .1rem;
}
.recombottom>div:nth-child(2){
  width: 2.15rem;
  height: 1.15rem;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.recombottom>div:nth-child(2)>button{
  width: 1rem;
  height: 0.35rem;
  margin-top: .2rem;
  border: none;
  border: 1px solid gray;
  border-radius: .2rem;
  outline: none;
  font-size: .11rem;
}
.recombottom>div:nth-child(3){
  width: 100%;
  height: .7rem;
   position: absolute;
  bottom: 0;
  text-align: center;
  line-height: .35rem;
}
</style>